<template>
  <div class="language-selector">
    <div class="selector-label">{{ prefixText }}</div>
    <el-dropdown class="custom-dropdown" placement="bottom-start">
      <span class="dropdown-toggle">
        {{ displayText }}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown" class="dropdown-options">
        <el-checkbox-group
          v-model="selectedLanguages"
          @change="handleLanguageChange"
          class="checkbox-group"
        >
          <el-checkbox
            v-for="language in languageOptions"
            :label="language.value"
            :key="language.label"
            class="checkbox-item"
            >{{ language.label }}</el-checkbox
          >
        </el-checkbox-group>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: [Array, String], // 允许数组或字符串
      default: () => [], // 默认为空数组
    },
    options: {
      type: Array,
      default: () => [],
    },
    prefixText: {
      type: String,
      default: "Select Language(s)",
    },
  },
  data() {
    return {
      selectedLanguages: this.value || [],
    };
  },
  computed: {
    displayText() {
      if (this.selectedLanguages.length === 0) {
        return "please select";
      } else if (this.selectedLanguages.length === 1) {
        return this.languageOptions
          .filter((opt) => this.selectedLanguages.includes(opt.value))
          .map((opt) => opt.label)
          .join("、");
      } else {
        // 显示前两个，然后 +N
        const firstTwo = this.languageOptions
          .filter((opt) => this.selectedLanguages.includes(opt.value))
          .slice(0, 1)
          .map((opt) => opt.label)
          .join("、");
        return `   ${firstTwo}; +${this.selectedLanguages.length}`;
      }
    },
    languageOptions() {
      return this.options.length > 0 ? this.options : "";
    },
  },
  watch: {
    value(newVal) {
      this.selectedLanguages = newVal;
    },
    selectedLanguages(newVal) {
      this.$emit("input", newVal);
    },
  },
  methods: {
    handleLanguageChange(values) {
      this.$emit("change", values);
    },
  },
  mounted() {
    console.log("子组件接收到的 options:", this.options);
    console.log("子组件接收到的 prefixText:", this.prefixText);
  },
};
</script>

<style scoped lang="scss">
.language-selector {
  border: 1px solid #6a6969;
  border-radius: 8px;
  padding: .0278rem .0972rem;
  width: 11.5694rem;
  position: relative;
  .selector-label {
    font-size: .0694rem;
    font-weight: 400;
    color: #8f8f8f;
    margin-bottom: 8px;
  }

  .custom-dropdown {
    .dropdown-toggle {
      display: inline-flex;
      align-items: center;
      width: 1.1528rem;
      height: .2222rem;
      padding: 0 .0833rem;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      background-color: #fff;
      color: #606266;
      cursor: pointer;
      transition: border-color 0.2s;

      &:hover {
        border-color: #c0c4cc;
      }

      .el-icon-arrow-down {
        transition: transform 0.2s;
      }
    }

    .dropdown-options {
      display: flex;
      flex-direction: column;
      min-width: 166px;
      border-radius: 4px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    }

    .checkbox-item {
      display: flex;
      flex-direction: column;
      padding: 6px 16px;
      font-size: 14px;
      color: #606266;

      &:hover {
        background-color: #f5f7fa;
      }
    }
  }

  // 下拉菜单展开状态
  .el-dropdown-menu--visible + .dropdown-toggle .el-icon-arrow-down {
    transform: rotate(180deg);
  }
}
::v-deep .el-checkbox-group {
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
  width: 166px;
  padding: 8px !important;
  position: absolute;
  left: -25px !important;
  // top: 0px !important;
  background: #fff;
  border: 1px solid #6a6969;
  border-radius: 4px;
}
</style>
